<script setup lang="ts">
import { ref } from 'vue';
import type { Params } from './messages_box';

const { title = 'Title', msg = 'This is a message', options } = defineProps<Params>()
const emit = defineEmits<{
    (e: 'close', value?: Function): void
    (e: 'confirm', value?: Function): void
}>()
const currentColor = ref<string>('#ccc')
const onClose = () => {
    emit('close')
}
const onConfirm = () => {
    emit('confirm')
}
</script>

<template>
    <div class="mask">
        <div class="messages_box">
            <div class="header">
                <span class="title">{{ title }}</span>
                <div class="close" @click="onClose">
                    <i class="close_icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                            <path :fill="currentColor"
                                d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z">
                            </path>
                        </svg>
                    </i>
                </div>
            </div>
            <div class="content">
                <p class="content_text">{{ msg }}</p>
                <slot></slot>
            </div>
            <div class="btns">
                <div class="left"></div>
                <button class="confirm" @click="onConfirm">{{ options ? options.confirmButtonText : '确认' }}</button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.mask {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);

    .messages_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-width: 420px;
        max-height: 128px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
        border-radius: 10px;
        padding: 15px;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            .title {
                font-size: 20px;
            }

            .close {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }
        }

        .content {
            color: #606266;
        }

        .btns {
            display: flex;

            .left {
                flex: 1;
            }

            .confirm {
                padding: 5px 10px;
                background-color: #409eff;
                border: none;
                border-radius: 5px;
                color: #fff;
                cursor: pointer;
                transition: background-color .2s ease;
            }

            .confirm:hover {
                background-color: #79bbff;
                transition: background-color .2s ease;
            }
        }
    }
}
</style>